<template>
  <el-form :model="form" class="demo-ruleForm" :rules="rules" ref="form">
    <h1>公司设置</h1>
    <div class="title">
      <div class="logo">
        <el-form-item class="img">
          <img :src='logo' alt />
        </el-form-item>
      </div>
      <div class="authentication">
        <ul>
          <li>
            <span class="tip">公司名称</span>
            <p>
              {{name}}
              <span :class="{'refuse':authStatus!==2}">({{authStatus|getAuth}})</span>
            </p>
            <router-link :to="{path:'/enterprise',query:{companyId:form.id}}" tag="button">修改</router-link>
            <!-- :disabled="authStatus===2" -->
          </li>
          <li>
            <span class="tip">年检日期</span>
            <p>
              {{annualTime}}
              <span :class="{'refuse':authStatus!==2}">({{authStatus|getAuth}})</span>
            </p>
            <router-link :to="{path:'/enterprise',query:{companyId:form.id}}" tag="button">修改</router-link>
          </li>
          <li>
            <span class="tip">营业执照编号</span>
            <p>
              {{businessLicenseNo}}
              <span :class="{'refuse':authStatus!==2}">({{authStatus|getAuth}})</span>
            </p>
            <router-link :to="{path:'/enterprise',query:{companyId:form.id}}" tag="button">修改</router-link>
          </li>
        </ul>
      </div>
    </div>
    <div class="info">
      <el-form-item label="公司简称" prop="shortName">
        <el-input v-model="form.shortName" placeholder="公司简称"></el-input>
      </el-form-item>
      <el-form-item label="企业性质" prop="nature">
        <el-select v-model="form.nature" placeholder="企业性质">
          <el-option v-for="item in options.nature" :key="item.val" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属产业" prop="industry">
        <el-select v-model="form.industry" placeholder="所属产业">
          <el-option v-for="item in options.industry" :key="item.val" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属行业" prop="trade">
        <el-cascader :options="options.trade" :props="{value:'code',label:'name',children:'childVo'}"
          v-model="form.trade"></el-cascader>
      </el-form-item>
      <el-form-item label="企业规模" prop="scale">
        <el-select v-model="form.scale" placeholder="企业规模">
          <el-option v-for="item in options.scale" :key="item.val" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册资金" prop="registerMoney">
        <el-input v-model="form.registerMoney" class="inner_inp" placeholder="注册资金"></el-input>万
        <el-select v-model="form.amountUnit" placeholder="类型" class="inner_sel">
          <el-option v-for="item in options.amount_unit" :key="item.val" :label="item.name" :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在地区" prop="area">
        <el-select v-model="form.area" placeholder="所在地区">
          <el-option v-for="item in options.area" :key="item.val" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人" prop="contact">
        <el-input v-model="form.contact" placeholder="联系人"></el-input>
        <el-checkbox v-model="form.showContact">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <!-- <el-form-item label="联系人职位" prop="job">
        <el-input v-model="form.job" placeholder="联系人职位"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="idType">
        <el-select v-model="form.idType" placeholder="证件类型">
          <el-option v-for="item in options.IDType" :key="item.val" :label="item.name" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idNo">
        <el-input v-model="form.idNo" placeholder="证件号码"></el-input>
      </el-form-item> -->
      <el-form-item label="固定电话" prop="tel">
        <el-input v-model="form.tel" placeholder="固定电话"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="contactPhone">
        <el-input v-model.trim="form.contactPhone" placeholder="手机号码"></el-input>
        <el-checkbox v-model="form.showPhone">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <el-form-item label="公司网址" prop="url">
        <el-input v-model="form.url" placeholder="公司网址"></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱" prop="contactMail">
        <el-input v-model="form.contactMail" placeholder="联系邮箱"></el-input>
        <el-checkbox v-model="form.showMail">在企业介绍页显示</el-checkbox>
      </el-form-item>
      <el-form-item label="公司福利" class="welfare" prop="allure">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>增加公司标签，提升公司诱人指数 (最多可选择 8 个)</span>
            <el-button style="float: right; padding: 3px 0;height:24px;" type="text" @click="dialogVisible = true">
              <i class="el-icon-menu"></i>修改标签
            </el-button>
            <el-dialog title="设置公司标签" :visible.sync="dialogVisible" width="800px" :lockScroll='false'>
              <h5>增加公司标签，提升公司诱人指数 (最多可选择 8 个)</h5>
              <el-tag v-for="tag in options.allure" :key="tag.name" @click="()=>{add_allure(tag)}">{{tag.name}}</el-tag>
              <div class="line"></div>
              <el-tag v-for="tag in form.allure" :key="tag.val" closable @close="()=>{remove_allure(tag)}">{{tag.name}}
              </el-tag>
            </el-dialog>
          </div>
          <el-tag v-for="tag in form.allure" :key="tag.val" closable @close="()=>{remove_allure(tag)}">{{tag.name}}
          </el-tag>
        </el-card>
      </el-form-item>
      <el-form-item label="详细地址" prop="address" class="address">
        <el-input v-model="form.address" placeholder="详细地址"></el-input>
        <el-button type="text" @click="dialogMap=true">地图选点</el-button>
      </el-form-item>
      <el-form-item label="乘车路线" prop="route">
        <el-input v-model="form.route" placeholder="乘车路线"></el-input>
      </el-form-item>

      <el-form-item label="公司简介" class="profile" prop="profile">
        <!-- <el-input type="textarea" :rows="8" placeholder="公司简介" v-model="form.profile"></el-input> -->
        <quillEditor @listenEvent="getProfile" :profile='form.profile' placeholder='公司简介' v-if='isShowFile'>
        </quillEditor>
      </el-form-item>
      <!-- feat 新增相册上传-->
      <el-form-item class="profile" label="企业相册">
        <enterpriseAlbum @fileListChange="fileListChange" :companyFileOutVoList='options.companyFileOutVoList' />
      </el-form-item>
      <!-- feat 新增视频上传-->
      <el-form-item class="profile" label="企业视频">
        <videoUpload @videoChange="videoChange" :companyFileOutVo='options.companyFileOutVo' />
      </el-form-item>

      <el-form-item class="btn">
        <el-button type="primary" width="286px" @click="onSubmit" :loading="loading"
          v-loading.fullscreen.lock="loading">保存</el-button>
      </el-form-item>
    </div>
    <el-dialog :visible.sync="dialogMap" width="30%" :show-close='false' class="dialog" :lockScroll='false'>
      <span slot='title'>请确认工作地址</span>
      <HeighMap @listenEvent="getLngLat" :address='form.address' :lat='form.lat' :lng='form.lng' ref='HeighMap'
        @handleClose='getDialogMap'>
      </HeighMap>
    </el-dialog>
  </el-form>
</template>

<script>
import {
  getNature,
  getIndustry,
  getAllure,
  getAmountUnit,
  getScale,
  getArea,
  findTradeDict,
  getIDType,
  selectCompanyByUserId
} from '../../../api/register';
import { postPicture, companyUpdate } from '../../../api/index';
import HeighMap from '../../common/heighMap.vue';
import quillEditor from '../../common/quillEditor'; //调用编辑器
// 上传视频组件
import videoUpload from './components/videoUpload'
// 上传相册组件
import enterpriseAlbum from './components/enterpriseAlbum'
export default {
  name: '',
  data () {
    // var validateProfile = (rule, value, callback) => {
    //   console.log(value);
    //   let ary = value.match(/(?<=>)[^<>]+(?=<)/g);
    //   if (ary&&ary.length) {
    //     console.log(ary);
    //     let str = ary.join('');
    //     if (str.length > 2000) {
    //       callback(new Error('公司简介不能超过2000个字！'));
    //     } else {
    //       callback()
    //     }
    //   }
    // };
    return {
      dialogMap: false,
      loading: false,
      name: '',
      annualTime: '', // 注册时间
      businessLicenseNo: '', // 营业执照编号
      authStatus: '', // 认证状态
      dialogVisible: false,
      isShowMap: false,
      isShowFile: false,
      logo: '',
      form: {
        id: '',
        shortName: '',
        nature: '',
        industry: '',
        trade: [],
        area: '',
        scale: '',
        address: '',
        profile: '',
        contact: '', //联系人
        contactMail: '', // 联系邮箱
        contactPhone: '', // 联系电话
        tel: '', // 座机
        route: '',
        logo: '',
        allure: [], // 福利
        registerMoney: '', //注册资金
        amountUnit: '',
        lng: '',
        lat: '',
        url: '',
        showContact: false,
        showMail: false,
        showPhone: false
      },
      // 字典
      options: {
        trade: [],
        nature: [],
        industry: [],
        area: [],
        scale: [],
        amount_unit: [],
        allure: [],
        IDType: [],
        // 视频会显得数据
        companyFileOutVo: {},
        // 图片会显得数据
        companyFileOutVoList: []

      },
      rules: {
        shortName: [
          { required: true, message: '请输入单位名称', trigger: 'change' },
          { max: 10, message: '单位名称不能超过10个字' }
        ],
        nature: [{ required: true, message: '请选择单位性质', trigger: 'change' }],
        industry: [{ required: true, message: '请选择所属产业', trigger: 'change' }],
        trade: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
        area: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
        scale: [{ required: true, message: '请选择单位规模', trigger: 'change' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'change' },
          { max: 100, message: '地址不能超过100个字' }
        ],
        profile: [
          { required: true, message: '请输入单位简介', trigger: 'change' },
          // { validator: validateProfile}
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'change' },
          { max: 20, message: '联系人不能超过20个字' }
        ],
        idNo: [
          { required: true, message: '请输入证件号码', trigger: 'change' },
          {
            pattern: /^([\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(号?))|([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X))|([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X))$/,
            message: '请输入正确的证件号'
          }
        ],
        registerMoney: [{ pattern: /^\d+$/, message: '注册资金只能为数字' }],
        contactMail: [
          { required: true, message: '请输入邮箱', trigger: 'change' },
          {
            pattern: /^[A-Za-z0-9]+([_\.A-Za-z0-9\-])*@([A-Za-z0-9\-]{0,64}\.)+[A-Za-z]{2,6}$/,
            message: '请输入正确的邮箱',
            trigger: 'change'
          },
          { max: 80, message: '邮箱不能超过80个字' }
        ],
        route: [{ max: 50, message: '路线不能超过50个字' }],
        url: [{ max: 50, message: '公司网址不能超过50个字' }],
        contactPhone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'change' }
        ],
        tel: [{ pattern: /^(0\d{2,3}-\d{7,8}(-\d{3,5}){0,1})$/, message: '请输入正确的电话号码', trigger: 'change' }]
      },
      // 图片数据
      fileList: [],
      // 视频URL
      videourl: {}
    };
  },
  components: {
    HeighMap,
    //使用编辑器
    quillEditor,
    // feat: 视频上传组件
    videoUpload,
    // feat: 上传相册组件
    enterpriseAlbum
  },
  created () {
    this.getDic();
  },
  filters: {
    // 获取认证状态
    getAuth (val) {
      switch (val) {
        case 1:
          return '待审核';
        case 2:
          return '已认证';
        default:
          return '未认证';
      }
    }
  },
  methods: {
    // 获取字典和用户信息
    getDic () {
      let obj = {
        nature: getNature,
        industry: getIndustry,
        allure: getAllure,
        amount_unit: getAmountUnit,
        scale: getScale,
        area: getArea,
        trade: findTradeDict,
        IDType: getIDType,
        companyFileOutVoList: selectCompanyByUserId,
        companyFileOutVo: selectCompanyByUserId
      };
      Promise.all(Object.values(obj).map(item => item())).then(data => {
        Object.keys(obj).forEach((key, index) => {
          this.options[key] = data[index].data;
        });
        console.log(this.options);
        return selectCompanyByUserId();
      }).then(data => {
        Object.keys(this.form).forEach(item => {
          if (item === 'trade') {
            if (data.data[item]) {
              this.form[item] = JSON.parse(data.data[item]);
              this.logo = require(`../../../assets/img/logo/${this.form.trade[0]}.png`);
            } else {
              this.form[item] = data.data[item];
            }
          } else if (item === 'allure') {
            if (data.data[item] && data.data[item].includes("[")) {
              this.form[item] =
                JSON.parse(data.data[item]).map(item => this.options.allure.find(val => val.val == item)) || [];
              console.log(this.form.allure);
            } else if (data.data[item]) {
              this.form[item] = data.data[item].split(',').map(item => this.options.allure.find(val => val.val == item)) || [];
              console.log(this.form.allure);
            }
          } else if (item === 'lng' || item === 'lat') {
            this.form[item] = Number(data.data[item]);
          } else {
            this.form[item] = data.data[item];
          }
        });
        this.name = data.data.name;
        this.annualTime = data.data.annualTime;
        this.businessLicenseNo = data.data.businessLicenseNo;
        this.authStatus = data.data.authStatus;
        this.isShowMap = true;
        this.isShowFile = true;
        console.log(this.form);
      });
    },
    // 获取子组件地图的坐标
    getLngLat (params) {
      console.log(params);
      this.form.lat = params.lat.toString();
      this.form.lng = params.lng.toString();
      console.log(this.form);
    },
    // 关闭地图
    getDialogMap (params) {
      this.dialogMap = params;
    },
    // 获取子组件富文本内容
    getProfile (params) {
      console.log(params);
      this.form.profile = params;
    },
    // 上传图片
    postPic (param) {
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          this.form.logo = data.data.fileUrl;
        } else {
          this.$message.error(`${data.msg}`);
        }
        console.log(data);
      });
    },
    // 添加福利标签
    add_allure (tag) {
      console.log(this.form.allure);
      if (this.form.allure.length > 7) return;
      if (!this.form.allure.some(item => item.val === tag.val)) this.form.allure.push(tag);
    },
    // 删除福利标签
    remove_allure (tag) {
      this.form.allure = this.form.allure.filter(item => tag.val !== item.val);
    },
    // 保存
    onSubmit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let str = JSON.stringify(this.form.allure.map(item => item.val));
          console.log(str);
          let query = { ...this.form, allure: str, trade: JSON.stringify(this.form.trade), companyFileOutVoList: this.fileList, companyFileOutVo: this.videourl };
          companyUpdate(query).then(data => {
            if (data.success) {
              this.loading = false;
              this.$router.push({ path: '/' });
            } else {
              this.loading = false;
              this.$message.error(`${data.msg}`);
            }
          });
        }
      });
    },
    // 图片上传的数据
    fileListChange (e) {
      let arr = []
      e.map((item) => {
        let obj = {}
        obj.filePath = item.filePath
        obj.fileSize = item.fileSize
        arr.push(obj)
      })
      this.fileList = arr
      console.log('传递过来的数据', e)
    },
    videoChange (url) {
      let obj = {}
      obj.filePath = url
      obj.fileSize = ''
      this.videourl = obj
      console.log('传递过来的数据', url)
    }
  }
};
</script>

<style scoped>
/* .dialog {
    height: 600px !important;
}
.dialog /deep/ .el-dialog__header {
    font-size: 14px;
    padding: 10px 0 5px 10px;
}
.dialog /deep/ .el-dialog__body {
    width: 100%;
    padding: 0;
    height: 100%;
} */
.demo-ruleForm {
    width: 100%;
    background: rgba(255, 255, 255, 1);
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 100px;
}
h1 {
    height: 69px;
    padding: 15px 0 0 45px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 48px;
    color: rgba(34, 34, 34, 1);
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.title {
    height: 232px;
    margin: 0 70px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    overflow: hidden;
}

.logo {
    float: left;
    margin-top: 30px;
    text-align: center;
}
.authentication {
    float: left;
    margin-top: 30px;
    margin-left: 80px;
}
.logo .img {
    width: 120px;
    height: 120px;
    opacity: 1;
}
.logo img {
    width: 120px !important;
    height: 120px !important;
    display: block;
    background: url('../../../assets/img/logo/null.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 6px;
}

.upload-demo {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin: 16px auto;
}
.upload-demo /deep/ .el-upload {
    width: 94px;
    height: 24px;
}
.upload-demo /deep/ .el-button {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    line-height: 0;
}
.authentication ul {
    list-style: none;
}
.authentication ul li {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-bottom: 28px;
}
.authentication ul li span {
    margin-left: 10px;
}
.authentication ul li p {
    width: 323px;
    display: inline-block;
}
.authentication ul li p span {
    color: rgb(0, 155, 62);
}
.authentication ul li p span.refuse {
    color: red;
}
.authentication ul li .tip {
    display: inline-block;
    text-align: right;
    width: 84px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    margin-right: 42px;
    opacity: 1;
}
.authentication ul li button {
    width: 64px;
    height: 24px;
    cursor: pointer;
    border: 1px solid rgba(204, 204, 204, 1);
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    color: rgba(85, 85, 85, 1);
    background: rgba(255, 255, 255, 1);
    opacity: 1;
}
.info {
    width: 100%;
    padding: 32px 44px;
}
.info .el-form-item {
    display: inline-block;
    width: 500px;
    margin-bottom: 16px;
}
.info .el-form-item.welfare {
    display: block;
    width: 650px;
}
.info .welfare /deep/ .el-card__header {
    padding: 4px 10px;
    height: 30px;
}
.info .el-form-item.profile {
    display: block;
    width: 800px;
    display: flex;
    margin-top: 30px;
}
.info .el-form-item.profile /deep/ .el-form-item__content {
    margin-top: -10px;
    flex: 1;
}
.info .welfare /deep/ .el-card__header .clearfix {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.info .el-form-item.welfare .box-card {
    width: 450px;
    border: none;
    box-shadow: unset;
}
.info .profile /deep/ .el-form-item__error {
    left: 0;
}
.info .el-form-item /deep/ .el-input {
    width: 240px;
    height: 40px;
    display: inline-block;
}
.info .el-form-item /deep/ .el-input__inner {
    width: 240px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.info .el-form-item .inner_inp /deep/ .el-input__inner {
    width: 216px;
}
.info .el-form-item .inner_sel {
    width: 99px;
}
.info .el-form-item .inner_sel /deep/ .el-input {
    width: 99px;
}
.info .el-form-item .inner_sel /deep/ .el-input__inner {
    width: 99px;
}
.info .el-form-item /deep/ .el-form-item__label {
    width: 100px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.info /deep/ .el-textarea {
    position: unset;
    width: 550px;
    height: 179px;
}
.info .el-textarea textarea {
    width: 550px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}
.info .el-form-item.btn /deep/ .el-form-item__content {
    margin-left: 99px;
}
.info .el-form-item.btn /deep/ .el-form-item__content button {
    width: 286px;
    height: 44px;
    background: rgba(24, 147, 252, 1);
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 0;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}
.info .el-tag {
    width: 104px;
    height: 23px;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    margin-left: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}
.info /deep/ .el-dialog__header {
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.info /deep/ .el-dialog__body {
    padding-top: 0;
}
.info .el-tag /deep/.el-tag__close {
    position: absolute;
    right: 2px;
    top: 4px;
}
.info .el-dialog__body h5 {
    padding-left: 20px;
    line-height: 36px;
}
.info .line {
    width: 100%;
    height: 0px;
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    margin: 10px auto 20px;
}
.el-checkbox {
    margin-left: 10px;
}
.address {
    margin-top: -20px;
}

.address /deep/ .el-button {
    position: absolute;
    top: 50px;
    left: 100px;
}
</style>